<template>
  <div class="rank-detail" v-nores="noRes">
    <div>
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed
        placeholder
      />
      <div class="backimg_warp" @click="clickRandom" v-if="songs.length > 0">
        <van-image fit="fill" :src="backImg" />
        <div class="random_content">
          <van-icon name="music" />
          <div class="random_title">随机播放</div>
        </div>
      </div>
    </div>

    <div class="songs_warp" v-loading="loading" :style="{ paddingBottom: pad }">
      <ul>
        <li
          class="song_item"
          v-for="(item, index) in songs"
          :key="item.id"
          @click="selectSong(item, index)"
        >
          <div>
            <span class="icon icon0" v-if="index === 0">{{ index + 1 }}</span>
            <span class="icon icon1" v-else-if="index === 1">{{
              index + 1
            }}</span>
            <span class="icon icon2" v-else-if="index === 2">{{
              index + 1
            }}</span>
            <span class="icon text" v-else>{{ index + 1 }}</span>
          </div>
          <div class="rank">
            <h2>{{ item.name }}</h2>
            <p>{{ item.album }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { getTopDetail } from '@/service/top-list'
import { processSongs } from '@/service/song'
import { getStorage, removeStorage } from '@/utils/storage'
import { TOP_KEY } from '@/assets/js/constant'
import { mapActions } from 'vuex'
export default {
  name: 'listDetail',
  data() {
    return {
      songs: [],
      rank: {},
      loading: false
    }
  },
  computed: {
    title() {
      return this.rank.name || this.rank.title
    },
    backImg() {
      return this.rank.pic
    },
    noRes() {
      return !this.loading && this.songs.length === 0
    },
    pad() {
      return this.$store.state.playlist.length > 0 ? '60px' : '0'
    }
  },
  methods: {
    ...mapActions(['selectPlay', 'randomPlay']),
    onClickLeft() {
      this.$router.go(-1)
    },
    selectSong(item, index) {
      this.selectPlay({
        list: this.songs,
        index
      })
    },
    clickRandom() {
      this.randomPlay(this.songs)
    }
  },
  async created() {
    this.loading = true
    const rank =
      this.$route.params && this.$route.params.name
        ? this.$route.params
        : getStorage(TOP_KEY)
    if (!rank) {
      Toast.fail({
        message: '未获取到数据',
        icon: 'clear'
      })
      setTimeout(() => {
        const path = this.$route.matched[0].path
        this.$router.push({
          path
        })
        this.loading = false
      }, 2000)
      return
    }
    this.rank = rank
    const res = await getTopDetail(this.rank)
    console.log(res)
    this.songs = await processSongs(res.songs)
    this.loading = false
  },
  onUnmounted() {
    removeStorage(TOP_KEY)
  }
}
</script>
<style lang="scss" scoped>
.rank-detail {
  width: 100%;
  height: 100vh;
  .van-image {
    width: 100%;
  }
  .songs_warp {
    width: 100%;
    padding: 20px 30px;
    font-size: 14px;
    .song_item {
      height: 64px;
      width: 100%;
      padding: 5px 0;
      display: flex;
      align-items: center;
      .icon {
        width: 25px;
        height: 24px;
        background-size: 25px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.icon0 {
          @include bg-image('first');
        }
        &.icon1 {
          @include bg-image('second');
        }
        &.icon2 {
          @include bg-image('third');
        }
      }
      .rank {
        margin-left: 20px;
        h2 {
          font-size: 16px;
          // color: $color-theme;
          color: #ddc16f;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.3);
        }
      }
      .text {
        color: $color-theme;
        font-size: $font-size-large;
      }
    }
  }
  .backimg_warp {
    position: relative;
    .random_content {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 160px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid $color-theme;
      border-radius: 15px;
      .random_title {
        margin-left: 10px;
        font-size: 14px;
        color: $color-theme;
      }
    }
  }
}
</style>
